<template>
  <div style="padding:10px;">
    <div class="menu-item-group">
      <div class="menu-item-label">历史会话({{historySessions.length}})</div>
      <el-menu
        :default-active="activeSessionId"
        @select="handleSelect"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          v-for="historySession in historySessions"
          :class="[activeSessionId == historySession.sessionId+'' ?'active':'']"
          :key="historySession.sessionId"
          :index="historySession.sessionId+''"
        >
          <div class="session-menu-style" slot="title">
            <el-avatar :size="40"></el-avatar>
            <div class="menu-middle-group">
              <div class="session-name-style">{{historySession.visiterName}}</div>
              <div class="session-msg-style">{{historySession.latestMessageContent}}</div>
            </div>
            <div class="menu-time-style">{{historySession.latestMessageTime}}</div>
          </div>
        </el-menu-item>
      </el-menu>
      <div class="menu-item-pagination">
        <el-pagination
          style="padding-left: 70px"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          :total="historyNum"
          small
          background
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>
    </div>
    <div class="session-item-group">
      <HistoryItem :sessionId="activeSessionId" :historySession="getHistorySession"></HistoryItem>
    </div>
  </div>
</template>

<script>
import HistoryItem from "@/components/items/HistoryItem";
import api from "@/api/api";
export default {
  name: "History",
  components: {
    HistoryItem
  },
  props: {},
  data() {
    return {
      activeSessionId: null,
      historySessions: [],
      historyNum: 0,
      currentPage: 1
    };
  },
  watch: {},
  computed: {
    getCustomerServiceId() {
      return this.$store.state.profile.customerServiceId;
    },
    getHistorySession() {
      return this.historySessions.find(item => {
        return item.sessionId + "" == this.activeSessionId;
      });
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      this.activeSessionId = index;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getHistorySessionList();
    },
    getHistorySessionList() {
      api
        .getHistorySessionAPI({
          customerServiceId: this.getCustomerServiceId,
          page: this.currentPage,
          limit: 10
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.historyNum = data.total;
            this.historySessions = data.page;
            this.activeSessionId = this.historySessions[0].sessionId + "";
          }
        });
    }
  },
  created() {
    this.getHistorySessionList();
  },
  mounted() {}
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 300px;
  height: auto;
  /* border-radius: 5px; */
}
.menu-item-label {
  width: 280px;
  background-color: #fff;
  height: 60px;
  /* border-top-left-radius: 5px; */
  /* border-top-right-radius: 5px; */
  /* color: #acacac; */
  padding-left: 20px;
  line-height: 60px;
  position: fixed;
  top: 75px;
  left: 75px;
  border-bottom: 1px solid #e6f1ff;
  z-index: 100;
}
.menu-item-pagination {
  width: 280px;
  background-color: #fff;
  height: 60px;
  /* border-bottom-left-radius: 5px; */
  /* border-bottom-right-radius: 5px; */
  /* color: #acacac; */
  padding-left: 20px;
  position: fixed;
  bottom: 9px;
  left: 75px;
  border-bottom: 1px solid #e6f1ff;
  z-index: 100;
  display: flex;
  align-items: center;
}
.menu-item-group {
  position: fixed;
  left: 75px;
  top: 75px;
  height: 72vh;
  overflow: auto;
  padding-top: 61px;
  background-color: #fff;
}
.session-item-group {
  margin-left: 320px;
  margin-top: 5px;
}
.active {
  background-color: #e6f1ff !important;
  /* color: #0166ed; */
  border-right: 4px solid #006eff;
}
.session-menu-style {
  height: 65px !important;
  width: 280px;
  display: flex;
  align-items: center;
  position: relative;
}
.menu-middle-group {
  line-height: 1em;
}
.session-name-style {
  padding: 10px;
  padding-top: 0;
}
.session-msg-style {
  font-size: 12px;
  color: #999999;
  padding-left: 10px;
}
.menu-time-style {
  color: #d1d3d6;
  font-size: 12px;
  position: absolute;
  right: 20px;
  top: -10px;
}
.el-menu-item,
.el-submenu__title {
  height: auto;
}
</style>